                               

import React, { Component } from "react";
import styles from './person.css'
import { Avatar, Image, Typography, Rate, Tag, Timeline, Space, Radio, Divider, Descriptions, Upload, Button,  } from 'antd';
import { WindowsOutlined, DingdingOutlined, QqOutlined, AppleOutlined, TrophyOutlined, HighlightOutlined, ScissorOutlined,
  ZhihuOutlined, LikeOutlined, ClockCircleOutlined, FormOutlined, BankOutlined, SlackOutlined, BulbOutlined,
  BranchesOutlined, ChromeOutlined, TwitterOutlined, AlipayCircleOutlined, UserOutlined, MailOutlined, PhoneOutlined, 
  IdcardOutlined, EnvironmentOutlined, LockOutlined, UserSwitchOutlined, UploadOutlined  } from '@ant-design/icons';
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";

const { Title, Paragraph, Text, Link } = Typography;
  const IconText = ({ icon, text }) => (
    <Space style={{marginLeft:20}}>
      {React.createElement(icon)}
      {text}
    </Space>
  );

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode:'工程',
      propser : {
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        onChange({ file, fileList }) {
          if (file.status !== 'uploading') {
            console.log(file, fileList);
          }
        },
        defaultFileList: [
          {
            uid: '1',
            name: '劳动合同承诺书.word',
            status: 'done',
            url: 'http://www.baidu.com/xxx.png',
            percent: 33,
          },
          {
            uid: '2',
            name: '公司保密协议.pdf',
            status: 'done',
            url: 'http://www.baidu.com/yyy.png',
          },
        ],
      }
    };
  }

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  handleModeChange = e => {
    const mode = e.target.value;
    this.setState({ mode });
  };

  render() {
    const { propser } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />   
        <div style={{margin:20}}>
            <div style={{display:'flex',justifyContent:'space-between'}}>
                <div style={{width:'63%',textAlign:'center', borderRight:'1px solid #ddd',overflow:'hidden'}}>
                  <div>
                    <Avatar size={60} shape="circle" src={<Image src="https://img2.baidu.com/it/u=1777042033,1463932871&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" />} /> 
                    <Title style={{marginTop:20}} level={4}>user007</Title>   
                    <Paragraph style={{color:'#bbb',fontSize:16}}><span style={{fontSize:16}}>海纳百川，有容乃大</span><span style={{color:'#999',marginLeft:30,fontSize:14}}><LockOutlined />已绑定手机 : 188****2163</span></Paragraph>
                    
                  </div>
                  <Divider />                  
                  <div style={{textAlign:'left',marginLeft:100,marginRight:25}}>                 
                    <p style={{lineHeight:4,marginLeft:-50}}><UserOutlined/><span> 个人资料:</span></p>
                    <Descriptions bordered>
                      <Descriptions.Item label="用户名">刘强</Descriptions.Item>
                      <Descriptions.Item label="登录名">user007</Descriptions.Item>
                      <Descriptions.Item label="性别"><span style={{marginLeft:3}}>男</span></Descriptions.Item>
                      <Descriptions.Item label="出生年月"><span style={{marginLeft:3}}>1995-02-09</span></Descriptions.Item>
                      <Descriptions.Item label="年龄"><span style={{marginLeft:3}}>28</span></Descriptions.Item>
                      <Descriptions.Item label="身份证号"><IdcardOutlined /><span style={{marginLeft:3}}>61052719950806****</span></Descriptions.Item>
                      <Descriptions.Item label="手机号"><PhoneOutlined /><span style={{marginLeft:3}}>15280259587</span></Descriptions.Item>
                      <Descriptions.Item label="Email"span={2} ><MailOutlined /><span style={{marginLeft:3}}>15296328852@163.com</span></Descriptions.Item>
                      <Descriptions.Item label="居住地址">
                        <EnvironmentOutlined />
                        <span style={{marginLeft:3}}>陕西省西安市雁塔区521家属院15栋2单元1704</span>
                      </Descriptions.Item>
                    </Descriptions>                       
                  </div>
                  <div style={{textAlign:'left',marginLeft:100,marginRight:25}}>
                     <p style={{lineHeight:4,marginLeft:-50}}><TrophyOutlined/><span> 个人职务:</span></p>
                     <Descriptions bordered>
                      <Descriptions.Item label="编号">WT0000208</Descriptions.Item>
                      <Descriptions.Item label="部门"><BankOutlined /><span style={{marginLeft:3}}>数字大脑平台部门</span> </Descriptions.Item>
                      <Descriptions.Item label="合作公司"><span style={{marginLeft:3}}>软通动力</span></Descriptions.Item>
                      <Descriptions.Item label="岗位"><span style={{marginLeft:3}}>产品设计师</span></Descriptions.Item>
                      <Descriptions.Item label="项目经理"><span style={{marginLeft:3}}>刘韬</span></Descriptions.Item>
                      <Descriptions.Item label="分部所在地"><span style={{marginLeft:3}}>西安市</span></Descriptions.Item>
                      <Descriptions.Item label="入职时间"><ClockCircleOutlined /><span style={{marginLeft:3}}>2020-02-19</span></Descriptions.Item>
                      <Descriptions.Item label="职称等级"span={2} ><UserSwitchOutlined /><span style={{marginLeft:3}}>10级</span></Descriptions.Item>
                      <Descriptions.Item label="工作地点">
                        <EnvironmentOutlined />
                        <span style={{marginLeft:3}}>陕西省西安市雁塔区高新区唐延南路15号国寿金融中心A座15楼</span>
                      </Descriptions.Item>
                    </Descriptions>                     
                  </div>
                  <div style={{textAlign:'left',marginLeft:100,marginRight:25}}>
                    <p style={{lineHeight:4,marginLeft:-50}}><BulbOutlined /><span> 个人标签:</span> </p>
                    <p style={{lineHeight:1}}>
                        <Tag icon={<HighlightOutlined />} color="#2db7f5">创作达人</Tag>
                        <Tag icon={<ScissorOutlined />} color="#2db7f5">灵感设计师</Tag>
                        <Tag icon={<ZhihuOutlined />} color="#55acee">知识创作优秀集大成者</Tag>
                        <Tag icon={<TrophyOutlined />} color="#52c41a">体育强人</Tag>
                    </p>   
                  </div>
                  <div style={{textAlign:'left',marginLeft:100}}>
                    <p style={{lineHeight:3, marginLeft:-50,position:'relative',top:15}}><BulbOutlined /><span> 资料文件:</span> </p>
                    <Upload {...propser} style={{marginTop:-20}}>
                      <Button style={{display:'none'}} icon={<UploadOutlined />}>Upload</Button>
                    </Upload> 
                  </div>                  
                </div>
                <div style={{width:'35%',marginTop:30}}>
                  <p style={{lineHeight:3}}><BulbOutlined /><span> 个人经历:</span> </p>
                  <div style={{textAlign:'left',marginLeft:100,marginRight:25,marginTop:10}}>
                      <p style={{lineHeight:2,marginLeft:-50,}}><span>教育经历 :</span> </p>
                      <Timeline style={{width:'60%',textAlign:'left',marginLeft:10,marginTop:10}}>
                          <Timeline.Item dot={<FormOutlined />}>上海市精英国际小学</Timeline.Item>
                          <Timeline.Item dot={<TrophyOutlined />}> <span>SPSA国际奥数冠军 2007-11</span> </Timeline.Item>
                          <Timeline.Item dot={<ClockCircleOutlined />}>上海国际高中部 2014-09</Timeline.Item>
                          <Timeline.Item dot={<BranchesOutlined />}>美国麻省理工学院(本科) 2016-04</Timeline.Item>
                          <Timeline.Item dot={<BankOutlined />}>美国哈佛大学(研究生) 2019-07</Timeline.Item>
                      </Timeline>      
                  </div>
                  <div style={{textAlign:'left',marginLeft:100,marginRight:25}}>
                      <p style={{lineHeight:2,marginLeft:-50}}><span>工作经历 :</span> </p>
                      <Timeline pending='工作中' style={{width:'60%',textAlign:'left',marginLeft:10,marginTop:10}}>
                          <Timeline.Item dot={<WindowsOutlined />}>Windows-首席交互设计师 2021-10</Timeline.Item>
                          <Timeline.Item dot={<DingdingOutlined />}>阿里-客户集群首席技术官 2021-12</Timeline.Item>
                          <Timeline.Item dot={<TwitterOutlined  />}>Twitter-无线网络事业群CFO 2022-01</Timeline.Item>
                          <Timeline.Item dot={<AppleOutlined style={{color:'#1DA1F2'}} />}>Apple-苹果产品体验设计师 2022-11</Timeline.Item>
                          <Timeline.Item dot={<AlipayCircleOutlined style={{color:'#1DA1F2'}} />}>支付宝- 2023-03</Timeline.Item>
                      </Timeline>
                  </div>
                </div>
            </div>        
        </div>
      </>  
    )
    }
}
